<template>
  <div class="min-h-screen flex flex-col">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.jpg" alt="bg-image" class="w-screen fixed top-0 left-0 z-0 object-cover" />
    <!-- 顶部导航栏-->
    <nav class="text-white relative bg-opacity-80 bg-black p-4 rounded-t-2xl">
      <div class="flex items-center">
        <span class="text-6xl font-bold mx-16 text-amber-400">趣味博物馆</span>
        <ul class="flex space-x-6 text-5xl shadow-2xl rounded-2xl px-10 py-4 mr-12 items-center">
          <a href="#" class="hover:text-amber-400" @click.prevent="goToHome">返回首页</a>
          <a href="#" class="hover:text-amber-400" @click.prevent="goToGame">互动体验</a>
          <a href="#" class="hover:text-amber-400" @click.prevent="goToAboutUs">关于我们</a>
        </ul>
      </div>
    </nav>
    <!-- 主体内容区 -->
    <main class="flex-1 py-8 px-4 relative">
      <div class="mx-auto w-3/4 text-black">
        <!-- 展览标题 -->
        <h1 class="text-8xl font-bold text-center mb-12 text-amber-600 bg-white shadow-2xl rounded-2xl px-10 py-4">文物鉴赏</h1>
        <!-- 文物展示列表 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8">
          <!-- 文物示例项 -->
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit1.png" alt="青铜鼎" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 mb-2" @click="showDetails('青铜鼎')">青铜鼎</h2>
              <p class="text-gray-400 text-4xl mb-4">
                青铜鼎是商周时期最重要的礼器之一，这件青铜鼎造型庄重，纹饰精美，承载着深厚的历史文化内涵，见证了古代祭祀与权力象征等诸多方面。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(1)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit2.png" alt="陶瓷花瓶" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('陶瓷花瓶')">陶瓷花瓶</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这只陶瓷花瓶出自宋代官窑，工艺精湛，瓶身的釉色温润如玉，图案细腻生动，展现了当时陶瓷制作的高超技艺和独特审美。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(2)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit3.png" alt="书画作品" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('书画作品')">书画作品</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这幅书画作品为明代大家所绘，笔墨酣畅淋漓，构图精妙，展现出了当时文人墨客的艺术境界和心境，极具艺术欣赏价值。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(3)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit1.png" alt="青铜鼎" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 mb-2" @click="showDetails('青铜鼎')">青铜鼎</h2>
              <p class="text-gray-400 text-4xl mb-4">
                青铜鼎是商周时期最重要的礼器之一，这件青铜鼎造型庄重，纹饰精美，承载着深厚的历史文化内涵，见证了古代祭祀与权力象征等诸多方面。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(1)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit2.png" alt="陶瓷花瓶" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('陶瓷花瓶')">陶瓷花瓶</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这只陶瓷花瓶出自宋代官窑，工艺精湛，瓶身的釉色温润如玉，图案细腻生动，展现了当时陶瓷制作的高超技艺和独特审美。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(2)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit3.png" alt="书画作品" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('书画作品')">书画作品</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这幅书画作品为明代大家所绘，笔墨酣畅淋漓，构图精妙，展现出了当时文人墨客的艺术境界和心境，极具艺术欣赏价值。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(3)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit1.png" alt="青铜鼎" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 mb-2" @click="showDetails('青铜鼎')">青铜鼎</h2>
              <p class="text-gray-400 text-4xl mb-4">
                青铜鼎是商周时期最重要的礼器之一，这件青铜鼎造型庄重，纹饰精美，承载着深厚的历史文化内涵，见证了古代祭祀与权力象征等诸多方面。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(1)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit2.png" alt="陶瓷花瓶" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('陶瓷花瓶')">陶瓷花瓶</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这只陶瓷花瓶出自宋代官窑，工艺精湛，瓶身的釉色温润如玉，图案细腻生动，展现了当时陶瓷制作的高超技艺和独特审美。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(2)">查看更多详情</button>
            </div>
          </div>
          <div class="bg-black-700 rounded-lg shadow-2xl overflow-hidden bg-white">
            <img src="../assets/images/artifacts/exhibit3.png" alt="书画作品" class="w-full h-100 object-cover" />
            <div class="p-6">
              <h2 class="text-5xl font-bold text-amber-500 hover:text-amber-600 mb-2" @click="showDetails('书画作品')">书画作品</h2>
              <p class="text-gray-400 text-4xl mb-4">
                这幅书画作品为明代大家所绘，笔墨酣畅淋漓，构图精妙，展现出了当时文人墨客的艺术境界和心境，极具艺术欣赏价值。
              </p>
              <button class="bg-amber-500 text-4xl text-white px-6 py-3 rounded-full hover:bg-amber-600" @click="goToDetail(3)">查看更多详情</button>
            </div>
          </div>
          <!-- 可继续添加更多文物展示项 -->
        </div>
      </div>
    </main>
    <!-- 详情展示模态框 -->
    <div v-if="showArtifactDetails" class="fixed inset-0 bg-black-800 bg-opacity-80 flex items-center justify-center z-50">
      <div class="bg-black rounded-lg shadow-2xl p-8 max-w-4xl w-full relative">
        <button class="absolute top-4 right-4 text-amber-500 hover:text-amber-600 text-5xl" @click="hideDetails">×</button>
        <h2 class="text-4xl font-bold text-amber-500 mb-4">{{ currentArtifact }}</h2>
        <div v-if="currentArtifact === '青铜鼎'">
          <img src="../assets/images/artifacts/exhibit1.png" alt="青铜鼎" class="w-full h-120 object-cover mb-6" />
          <p class="text-gray-400 text-4xl">
            青铜鼎的详细介绍：青铜鼎在古代社会有着举足轻重的地位，从它的造型来看，三足鼎立的结构不仅稳固，而且富有美学价值。其纹饰多采用饕餮纹、云雷纹等，寓意着神秘与威严。铸造工艺方面，涉及到复杂的模范法，需经过多道工序精心打造。它常出现在祭祀等重大场合，是沟通天地、彰显权力的重要器物。
          </p>
        </div>
        <div v-if="currentArtifact === '陶瓷花瓶'">
          <img src="../assets/images/artifacts/exhibit2.png" alt="陶瓷花瓶" class="w-full h-120 object-cover mb-6" />
          <p class="text-gray-400 text-4xl">
            陶瓷花瓶的详细介绍：宋代官窑陶瓷花瓶以其独特的釉色配方闻名于世，如粉青、天青等色调，仿佛将天空与自然之美融入其中。瓶身的装饰手法多样，刻花、划花工艺细腻入微，使图案栩栩如生。烧制温度和窑内气氛的精准控制更是关键，稍有偏差就会影响成品的品质，这只花瓶无疑是当时官窑技艺的杰出代表。
          </p>
        </div>
        <div v-if="currentArtifact === '书画作品'">
          <img src="../assets/images/artifacts/exhibit3.png" alt="书画作品" class="w-full h-120 object-cover mb-6" />
          <p class="text-gray-400 text-4xl">
            书画作品的详细介绍：这幅明代书画作品体现了当时的绘画风格与书法特色。在绘画上，画家运用了独特的皴法来表现山水的质感与层次感，色彩淡雅却意境深远。书法部分，字体刚劲有力又不失灵动，笔画之间的呼应关系展现出书写者深厚的书法功底，整体作品反映了那个时代的文化氛围与艺术追求。
          </p>
        </div>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <div class="mt-12 mb-20 text-left relative text-4xl ml-96">
      <button class="bg-amber-500 text-white px-8 py-4 rounded-full hover:bg-amber-600 focus:outline-none" @click="scrollToTop">
        返回顶部
      </button>
    </div>
    <!-- 底部版权信息区 -->
    <footer class="bg-black-800 p-4 relative  text-white text-center text-4xl">
      &copy; {{ currentYear }} 线上博物馆项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const currentYear = ref(new Date().getFullYear());
const router = useRouter();
const showArtifactDetails = ref(false);
const currentArtifact = ref('');

const goToHome = () => {
  router.push('/Home');
};

const goToGame = () => {
  router.push('/Camera');
};

const goToDetail = (id: number) => {
  router.push({ name: 'ExhibitDetails', params: { id } });
};

const goToAboutUs = () => {
  router.push('/About');
};

const showDetails = (artifact: string) => {
  currentArtifact.value = artifact;
  showArtifactDetails.value = true;
};

const hideDetails = () => {
  showArtifactDetails.value = false;
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};
</script>

<style scoped>
/* 可以在这里添加更多自定义样式来精细调整页面显示效果 */
</style>